<template>
  <div>
    <div class="leftSideBar">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="runApp(item)">
          {{ item.text }}
        </li>
      </ul>
    </div>
    <div id="debug-info"></div>
    <div id="content"></div>
  </div>
</template>

<script>
import './styles/global.css';
import _00Test from './00Test/_00Test.ts';
import _00Test2 from './00Test/_00Test2.ts';
import _1_1Cube from './01-10/_1_1Cube';
import _2_1AxesHelp from './01-10/_2_1AxesHelp';
import _3_1Camera from './01-10/_3_1Camera';
import _4_01Light from './01-10/_4_01Light';
import _5_01Texture from './01-10/_5_01Texture';
import _6_1Geometry from './01-10/_6_1Geometry';
import _7_1Model from './01-10/_7_1Model';
import _8_1GeometryParticle from './01-10/_8_1GeometryParticle';
import _9_1MathTest from './01-10/_9_1MathTest';
import _10_1MultipleViews from './01-10/_10_1MultipleViews';
import _11_1RayPick from './11-19/_11_1RayPick';
import _12Particles from './11-19/_12Particles';
import _13ShapeTest from './11-19/_13ShapeTest';
import _14SpirteTest from './11-19/_14SpirteTest';
import _15LayerTest from './11-19/_15LayerTest';
import _16LineFatTest from './11-19/_16LineFatTest';

export default {
  name: 'App',
  data() {
    return {
      list: [
        { text: '00Test1', app: _00Test },
        { text: '00Test2', app: _00Test2 },
        { text: '1_1Cube', app: _1_1Cube },
        { text: '2_1AxesHelp', app: _2_1AxesHelp },
        { text: '3_1Camera', app: _3_1Camera },
        { text: '4_01Light', app: _4_01Light },
        { text: '5_01Texture', app: _5_01Texture },
        { text: '6_1Geometry', app: _6_1Geometry },
        { text: '7_1Model', app: _7_1Model },
        { text: '8_1GeometryParticle', app: _8_1GeometryParticle },
        { text: '9_1MathTest', app: _9_1MathTest },
        { text: '10_1MultipleViews', app: _10_1MultipleViews },
        { text: '11_1RayPick', app: _11_1RayPick },
        { text: '12Particles', app: _12Particles },
        { text: '13ShapeTest', app: _13ShapeTest },
        { text: '14SpirteTest', app: _14SpirteTest },
        { text: '15LayerTest', app: _15LayerTest },
        { text: '16LineFatTest', app: _16LineFatTest },
      ],
      current: null,
    };
  },

  methods: {
    runApp(item) {
      if (item.app == this.current) {
        return;
      }
      if (this.current) {
        this.current.destory();
      }
      console.log(item.text);
      const content = this.$el.children['content'];
      if (content.hasChildNodes()) {
        content.removeChild(content.children[0]);
      }

      const can = item.app.create();
      content.appendChild(can);

      item.app.start();
      this.current = item.app;
    },
  },
  components: {},
};
</script>

<style scoped>
.leftSideBar {
  background-color: #dddddd;
  position: absolute; /*这可以换成float:left,都可以使其脱离文档流*/
  height: 95%;
  width: 200px;
  border: 1px solid black;
  overflow: auto;
}

.leftSideBar li {
  color: black;
  text-decoration: underline;
}

.leftSideBar li:hover {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

#content {
  height: 95%;
  margin-left: 203px;
  background-color: #ffffff;
  border: 2px solid aqua;
  padding: 2px;
  min-width: 200px;
}
#debug-info {
  position: absolute;
  left: 213px;
  top: 10px;
}
</style>
